<template>
  <el-form :model="formData" label-width="100px" label-suffix=" :">
    <el-form-item label="用户姓名">
      <BInput v-model="formData.username" placeholder="请填写用户姓名" clearable :inputProps="{ maxlength: 50 }"
        :inputEvents="{ input: handleUsernameInput }" />
    </el-form-item>

    <el-form-item label="年龄">
      <BInputNumber v-model="formData.age" placeholder="请填写年龄" :inputNumberProps="{ min: 0, max: 120 }"
        :inputNumberEvents="{ change: handleAgeChange }" />
    </el-form-item>

    <el-form-item label="性别">
      <BSelect v-model="formData.gender" placeholder="请选择性别" clearable :options="genderOptions"
        :selectProps="{ filterable: true }" :selectEvents="{ change: handleGenderChange }" />
    </el-form-item>

    <el-form-item label="兴趣爱好">
      <BCheckbox v-model="formData.hobbies" :options="hobbyOptions" :checkboxProps="{ border: true }"
        :checkboxEvents="{ change: handleHobbiesChange }" />
    </el-form-item>

    <el-form-item label="婚姻状况">
      <BRadio v-model="formData.maritalStatus" :options="maritalStatusOptions" :radioProps="{ border: true }"
        :radioEvents="{ change: handleMaritalStatusChange }" />
    </el-form-item>

    <el-form-item label="是否启用">
      <BSwitch v-model="formData.isEnabled" :switchEvents="{ change: handleSwitchChange }" />
    </el-form-item>

    <el-form-item label="出生日期">
      <BDatePicker v-model="formData.birthDate" placeholder="请选择出生日期" value-format="YYYY-MM-DD"
        :datePickerProps="{ type: 'date' }" :datePickerEvents="{ change: handleBirthDateChange }" />
    </el-form-item>

    <el-form-item label="注册时间">
      <BTimePicker v-model="formData.registrationTime" placeholder="请选择注册时间" :timePickerProps="{ isRange: false }"
        :timePickerEvents="{ change: handleRegistrationTimeChange }" />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="handleSubmit">提交</el-button>
      <el-button @click="handleReset">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import {
  BInput,
  BInputNumber,
  BSelect,
  BRadio,
  BCheckbox,
  BSwitch,
  BTimePicker,
  BDatePicker
} from '@/components/BaseComponents';

const formData = reactive({
  username: '',
  age: 0,
  gender: '',
  hobbies: [],
  maritalStatus: '',
  isEnabled: false,
  birthDate: '',
  registrationTime: ''
});

const genderOptions = [
  { label: '男', value: 'male' },
  { label: '女', value: 'female' }
];

const hobbyOptions = [
  { label: '篮球', value: 'basketball' },
  { label: '足球', value: 'football' },
  { label: '游泳', value: 'swimming' }
];

const maritalStatusOptions = [
  { label: '未婚', value: 'single' },
  { label: '已婚', value: 'married' },
  { label: '离异', value: 'divorced' }
];

const handleUsernameInput = (value: string) => {
  console.log('用户姓名变化:', value);
};

const handleAgeChange = (value: number) => {
  console.log('年龄变化:', value);
};

const handleGenderChange = (value: string) => {
  console.log('性别变化:', value);
};

const handleHobbiesChange = (value: string[]) => {
  console.log('兴趣爱好变化:', value);
};

const handleMaritalStatusChange = (value: string) => {
  console.log('婚姻状况变化:', value);
};

const handleSwitchChange = (value: boolean) => {
  console.log('是否启用变化:', value);
};

const handleBirthDateChange = (value: string) => {
  console.log('出生日期变化:', value);
};

const handleRegistrationTimeChange = (value: string) => {
  console.log('注册时间变化:', value);
};

const handleSubmit = () => {
  console.log('表单提交:', formData);
};

const handleReset = () => {
  formData.username = '';
  formData.age = 0;
  formData.gender = '';
  formData.hobbies = [];
  formData.maritalStatus = '';
  formData.isEnabled = false;
  formData.birthDate = '';
  formData.registrationTime = '';
};
</script>
